<template>
  <div>
    <router-link tag="div" to="/" class="header-abs" v-show="showAbs">
      <span class="iconfont header-abs-back">&#xe601;</span>
    </router-link>
    <div class="header-fixed" v-show="!showAbs" :style="opacityStyle">
      <router-link to="/">
        <span class="iconfont header-fixed-back">&#xe601;</span>
      </router-link>
      {{this.sightName}}
    </div>
  </div>
</template>
<script>
  export default {
    name: 'DetailHeader',
    props: {
      sightName: String
    },
    data() {
      return {
        showAbs: true,
        opacityStyle: {
          opacity: 0
        }
      }
    },
    methods: {
      handleScroll() {
        const windowTop = document.documentElement.scrollTop
        console.log(windowTop)
        if (windowTop > 60) {
          let opacity = windowTop / 140
          opacity = opacity > 1 ? 1 : opacity
          this.opacityStyle = {
            opacity
          }
          this.showAbs = false
        } else {
          this.showAbs = true
        }
      }
    },
    //组件激活时调用
    mounted() {
      window.addEventListener('scroll', this.handleScroll)
    },
    //组件停用时调用 页面即将被替换成新的页面时deactivated生命周期钩子被执行
    unmounted() {
      window.removeEventListener('scroll', this.handleScroll)
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../../static/css/varibles.styl"
  .header-abs
    width: 0.6rem
    height: 0.6rem
    background: rgba(0, 0, 0, .6)
    position: absolute
    top: 0.2rem
    left: 0.2rem
    z-index: 10
    -webkit-border-radius: 50%
    -moz-border-radius: 50%
    border-radius: 50%
    text-align: center;
    line-height: 0.6rem
    .header-abs-back
      color: #fff
      font-size: 0.3rem

  .header-fixed
    width: 100%
    height: $headerHeight
    line-height: $headerHeight
    color: #fff
    background: $bgColr
    text-align: center
    position: fixed
    font-size: 0.3rem
    z-index: 10
    .header-fixed-back
      position: absolute
      top: 0;
      left: 0.1rem
      color: #ffffff
      font-size: 0.38rem
</style>
